<template>
	<view class="content">
		<view v-if="cartList.length<=0" style="width: 100%;height: 250px;">
			<view class="glance-shop-cart-nullcart"></view>
			<view style="height: 30px;width: 100%;font-size: 15px;line-height: 30px;text-align: center;">您的购物车为空，快去添加心爱的商品吧！</view>
		</view>
		<!-- <view class="coudan fs14 clear-both">
			<view class="float-l"><text class="vertical color6">满88.00元立享包邮，还差<text class="colorm">60.00</text>元</text></view>
			<view class="float-r">
				<navigator url="../repurchase/repurchase">
					<text class="colorFF6 vertical">去凑单</text>
					<image src="http://iph.href.lu/10x10" mode="aspectFill" class="vertical coudan-img"></image>
				</navigator>
			</view>
		</view> -->
		<view v-for="(item,index) in cartList" :key="index">
			<view class="title">
				<image :src="baseres+'/act/mrhappy/'+(item.IsFlash?'flash.png':'unflash.png')"  mode="aspectFill" class="vertical title-img"></image>
				<text class="fs16 color3">{{item.Title}}</text>
			</view>
			<view class="cake-list">
				<view class="list-item clear-both">
					<!--选择按钮-->
					<image :src="baseres+'/act/mrhappy/'+(item.Checked?'uncheck.png':'check.png')" mode="aspectFill" class="choose-img float-l" @tap="choose(item)"></image>
					<!--蛋糕图片-->
					<view class="item-img float-l" @tap="gohref(item)">
						<image :src="item.img" mode="aspectFill" class="cake-img"></image>
						<!-- <view class="fs14 colorFF6 isZp" v-if="items.isZp">赠品</view> -->
					</view>
					<view class="float-l cake-list-r">
						<!--蛋糕名字-->
						<view class="fs14 color3 text-over">{{item.CommodityName}}</view>
						<view class="fs12 colora2 text-over guige">规格：{{item.PackageName}}</view>
						<view class="clear-both cake-list-b">
							<!--蛋糕价格-->
							<view class="float-l"><text class="fs16 color6">￥{{item.ZkPrice || item.Price}}</text><text class="fs14 color9">/{{item.Size}}</text></view>
							<!--赠品数量-->
							<!-- <view class="float-l" v-if="items.isZp"><text class="fs14 color9">数量：{{items.Num}}</text></view> -->
							<!--加减操作按钮-->
							<view class="float-r clear-both">
								<view class="float-l fs20 color6 options" @tap="minusitem(item)">-</view>
								<view class="float-l fs14 color3 nums">{{item.Num}}</view>
								<view class="float-l fs20 colorFF6 options options2" @tap="plusitem(item)">+</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!--猜你喜欢-->
		<!-- <view class="guess">
			<image src="../../static/tabbar/shopcar/guess.png" mode="aspectFill" class="guess-title"></image>
			<view class="clear-both">
				<view class="guess-item float-l" v-for="(item,index) in guessList" :key="index">
					<image :src="item.img" mode="aspectFill" class="guess-cakeimg"></image>
					<view class="fs14 color3 guess-name">{{item.name}}</view>
					<view class="clear-both guess-bot">
						<view class="float-l"><text class="fs14 colorm">{{item.prise}}</text><text class="fs12 color9">{{item.size}}</text></view>
						<image src="../../static/tabbar/index/goods_fill.png" mode="aspectFill" class="shop-car float-r"></image>
					</view>
				</view>
			</view>
		</view> -->

		<!--结算按钮-->
		<view class="jieshuan clear-both" v-if="cartList.length>0">
			<view class="float-l" @click="choose(null,'all')">
				<view class="">
					<image :src="baseres+'/act/mrhappy/'+(checkall?'uncheck.png':'check.png')" mode="aspectFill" class="vertical quanx-img"></image>
					<text class="fs16 color6 vertical">全选</text>
					<text class="fs14 colorFF6 vertical ml-1" v-show="checkall" @click.stop="clearall()">删除</text>
				</view>
			</view>
			<view class="float-r clear-both">
				<view class="float-l fs14"><text class="color9">合计</text><text class="colorm">￥</text><text class="colorm fs20">{{totalPrice.toFixed(2)}}</text></view>
				<view @tap="goOrder" class="float-r js_btn fs16">结算({{total}})</view>
			</view>
		</view>
	</view>
</template>
<script src="../../api/cart/index.js">

</script>
<style lang="scss">
	.content {
		.ml-1 {
			margin-left: 2vw;
		}

		padding-bottom: 13.334vw;

		.coudan {
			height: 13.8667vw;
			line-height: 13.8667vw;
			padding: 0 4.2667vw;
			border-bottom: 2.667vw solid #fafafa;

			.coudan-img {
				width: 4.2667vw;
				height: 4.2667vw;
				margin-left: 1vw;
			}
		}

		.title {
			height: 13.8667vw;
			line-height: 13.8667vw;
			margin: 0 4.2667vw;
			border-bottom: 2upx solid #F2F2F2;

			.title-img {
				width: 5.8667vw;
				height: 5.8667vw;
				margin-right: 2vw;
			}
		}

		.cake-list {
			padding: 0 4.2667vw 5.334vw 4.2667vw;
			border-bottom: 2.667vw solid #fafafa;

			.cake-list-r {
				position: relative;
				height: 100%;
				width: 54vw;

				.cake-list-b {
					position: absolute;
					bottom: 0;
					right: 0;
					height: 6.4vw;
					line-height: 6.4vw;
					width: 100%;

					.options {
						width: 6.4vw;
						height: 6.4vw;
						border: 2upx solid #e7e7e7;
						text-align: center;
						border-top-left-radius: .8vw;
						border-bottom-left-radius: .8vw;
					}

					.options2 {
						border-radius: 0;
						border-top-right-radius: .8vw;
						border-bottom-right-radius: .8vw;
					}

					.nums {
						width: 10.667vw;
						text-align: center;
						border-top: 2upx solid #e7e7e7;
						border-bottom: 2upx solid #e7e7e7;
						height: 6.4vw;
						line-height: 6.4vw;
					}
				}
			}

			.list-item {
				margin-top: 5.334vw;
				height: 26.667vw;

				.choose-img {
					width: 5.8667vw;
					height: 5.8667vw;
					margin-right: 2vw;
					margin-top: 10.40015vw;
				}

				.item-img {
					width: 26.667vw;
					height: 26.667vw;
					border-radius: 1.6vw;
					overflow: hidden;
					margin-right: 2vw;
					border: 2rpx solid #eee;
					position: relative;

					.cake-img {
						width: 100%;
						height: 100%;
						display: block;
					}

					.isZp {
						position: absolute;
						bottom: 0;
						left: 0;
						background: #E5ECF5;
						height: 6.4vw;
						line-height: 6.4vw;
						text-align: center;
						width: 100%;
					}
				}

				.cake-img2 {
					margin-left: 7.8667vw;
				}

				.guige {
					margin-top: 1.6vw;
				}
			}
		}

		.cake-list2 {
			border-bottom: none;
		}

		.guess {
			background: #FAFAFA;
			width: 100%;
			padding-bottom: 3.2vw;

			.guess-title {
				width: 100%;
				height: 8vw;
				margin: 2.933vw 0;
				display: block;
			}

			.guess-item {
				width: 43.6vw;
				margin-left: 4.2667vw;
				background: #fff;
				border-radius: 1.6vw;
				overflow: hidden;
				box-shadow: 0 .5vw 1.6vw 0 rgba(0, 0, 0, 0.12);
				margin-bottom: 3.2vw;

				.guess-cakeimg {
					width: 100%;
					height: 43.6vw;
					display: block;
				}

				.guess-name {
					margin: 2vw 2vw 1vw 2vw;
					height: 10.667vw;
				}

				.guess-bot {
					margin: 0 2vw;
					height: 5.8667vw;
					line-height: 5.8667vw;
					margin-bottom: 3vw;

					.shop-car {
						width: 5.8667vw;
						height: 5.8667vw;
						display: block;
					}
				}
			}
		}

		.jieshuan {
			width: 100%;
			background: #fff;
			height: 13.334vw;
			line-height: 13.334vw;
			position: fixed;
			/* #ifdef MP-WEIXIN */
			bottom: 0;
			/* #endif */
			/* #ifdef H5 */
			bottom: var(--window-bottom);
			/* #endif */
			left: 0;
			z-index: 9;
			border-top: 2upx solid #f2f2f2;

			.quanx-img {
				width: 5.8667vw;
				height: 5.866vw;
				margin-right: 1.334vw;
				margin-left: 4.2667vw;
			}

			.js_btn {
				padding: 0 6.667vw;
				height: 100%;
				background: #00449F;
				color: #fff;
				text-align: center;
				margin-left: 2.667vw;
			}
		}
	}
	// 空购物车背景样式
	.glance-shop-cart-nullcart {
		width: 120px;
		height: 120px;
		position: relative;
		transform: translateY(-50%);
		left: 50%;
		transform: translateX(-50%);
		background-repeat: no-repeat;
		background-image: url()
	}
</style>
